<template>
  <div class="mainbody">
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="final-value">当前目标制冷量: {{ completeData && completeData.totalrt_after?completeData.totalrt_after.toFixed(2):'-' }}RT</div>
      <el-button class="view-button" type="primary" @click="openView">返回</el-button>
      <div class="system-frame">
        <div class="setting-title"><div class="title-left">[1]</div><div class="title-right">冰机各个模块频率优化前后对比</div></div>
        <div class="flow-frame">
          <div v-for="(item,index) in pumpData" :key="index" class="flow-item">
            <HzCompare :data-item="item" />
          </div>
          <div class="flow-item">
            <div>
              <div class="Hz-title">冷却塔频率</div>
              <div class="legend">
                <div class="legend-item"><span class="item-one" style="background:#00f4ff" />{{ towerData&&towerData[0]&&towerData[0].name?towerData[0].name:'-' }}</div>
                <div class="legend-item"><span class="item-two" style="background:#0600ff" />{{ towerData&&towerData[1]&&towerData[1].name?towerData[1].name:'-' }}</div>
                <div class="legend-item"><span class="item-three" style="background:#fb8ece" />{{ towerData&&towerData[2]&&towerData[2].name?towerData[2].name:'-' }}</div>
              </div>
              <div class="ruler-item">
                <div>优化前</div>
                <div class="ruler">
                  <em :style="{left:towerData&&towerData[0]&&towerData[0].frequency_before?towerData[0].frequency_before/70*100-1 + '%':'0'}">{{ towerData&&towerData[0]&&isNumber(towerData[0].frequency_before)?(towerData[0].frequency_before).toFixed(0):'-' }}</em><span :style="{left:towerData&&towerData[0]&&towerData[0].frequency_before?towerData[0].frequency_before/70*100 + '%':'0'}" />
                  <em :style="{left:towerData&&towerData[1]&&towerData[1].frequency_before?towerData[1].frequency_before/70*100-1 + '%':'0'}">{{ towerData&&towerData[1]&&isNumber(towerData[1].frequency_before)?(towerData[1].frequency_before).toFixed(0):'-' }}</em><span :style="{left:towerData&&towerData[1]&&towerData[1].frequency_before?towerData[1].frequency_before/70*100 + '%':'0'}" />
                  <em :style="{left:towerData&&towerData[2]&&towerData[2].frequency_before?towerData[2].frequency_before/70*100-1 + '%':'0'}">{{ towerData&&towerData[2]&&isNumber(towerData[2].frequency_before)?(towerData[2].frequency_before).toFixed(0):'-' }}</em><span :style="{left:towerData&&towerData[2]&&towerData[2].frequency_before?towerData[2].frequency_before/70*100 + '%':'0'}" />
                  <em style="left:0%;bottom:0px;">0</em><em style="left:96%;bottom:0px;">70</em>
                </div>
              </div>
              <div class="ruler-item">
                <div class="hide">优化前</div>
                <div class="ruler-hide">
                  <svg class="animation-line" :style="{left:svgLeftValue0,width:svgWidthValue0}" width="5%" height="10px"><rect x="0" y="2" width="100%" height="5" fill="#00f4ff"><animate attributeName="width" from="0" to="100%" dur="6s" calcMode="spline" keyTimes="0;1" keySplines=".42,0,.58,1" repeatCount="indefinite" /></rect><rect x="28.5239" y="2.5" width="1" height="0" fill="#fff"><animate attributeName="x" from="0" to="30" dur="6s" calcMode="spline" keyTimes="0;1" keySplines="0.42,0,0.58,1" repeatCount="indefinite" /></rect></svg>
                  <svg class="animation-line" :style="{left:svgLeftValue1,width:svgWidthValue1}" width="5%" height="10px"><rect x="0" y="10" width="100%" height="5" fill="#0600ff"><animate attributeName="width" from="0" to="100%" dur="6s" calcMode="spline" keyTimes="0;1" keySplines=".42,0,.58,1" repeatCount="indefinite" /></rect><rect x="28.5239" y="2.5" width="1" height="0" fill="#fff"><animate attributeName="x" from="0" to="30" dur="6s" calcMode="spline" keyTimes="0;1" keySplines="0.42,0,0.58,1" repeatCount="indefinite" /></rect></svg>
                  <svg class="animation-line" :style="{left:svgLeftValue2,width:svgWidthValue2}" width="5%" height="10px"><rect x="0" y="18" width="100%" height="5" fill="#fb8ece"><animate attributeName="width" from="0" to="100%" dur="6s" calcMode="spline" keyTimes="0;1" keySplines=".42,0,.58,1" repeatCount="indefinite" /></rect><rect x="28.5239" y="2.5" width="1" height="0" fill="#fff"><animate attributeName="x" from="0" to="30" dur="6s" calcMode="spline" keyTimes="0;1" keySplines="0.42,0,0.58,1" repeatCount="indefinite" /></rect></svg>
                </div>
              </div>
              <div class="ruler-item">
                <div>优化后</div>
                <div class="ruler">
                  <em :style="{left:towerData&&towerData[0]&&towerData[0].frequency_after?towerData[0].frequency_after/70*100-1 + '%':'0'}">{{ towerData&&towerData[0]&&isNumber(towerData[0].frequency_after)?(towerData[0].frequency_after).toFixed(0):'-' }}</em><span :style="{left:towerData&&towerData[0]&&towerData[0].frequency_after?towerData[0].frequency_after/70*100 + '%':'0'}" />
                  <em :style="{left:towerData&&towerData[1]&&towerData[1].frequency_after?towerData[1].frequency_after/70*100-1 + '%':'0'}">{{ towerData&&towerData[1]&&isNumber(towerData[1].frequency_after)?(towerData[1].frequency_after).toFixed(0):'-' }}</em><span :style="{left:towerData&&towerData[1]&&towerData[1].frequency_after?towerData[1].frequency_after/70*100 + '%':'0'}" />
                  <em :style="{left:towerData&&towerData[2]&&towerData[2].frequency_after?towerData[2].frequency_after/70*100-1 + '%':'0'}">{{ towerData&&towerData[2]&&isNumber(towerData[2].frequency_after)?(towerData[2].frequency_after).toFixed(0):'-' }}</em><span :style="{left:towerData&&towerData[2]&&towerData[2].frequency_after?towerData[2].frequency_after/70*100 + '%':'0'}" />
                  <em style="left:0%;bottom:0px;">0</em><em style="left:96%;bottom:0px;">70</em>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="setting-title"><div class="title-left">[2]</div><div class="title-right">冰机各个模块流量优化前后对比</div></div>
        <div class="flow-frame">
          <div v-for="(item,index) in pumpData" :key="index" class="flow-item">
            <div class="Hz-title">{{ item&&item.name?item.name:'' }}流量</div>
            <span>下降{{ item && item.flow_before!==0 && isNumber(item.flow_before)&& isNumber(item.flow_after)?((item.flow_before-item.flow_after)/item.flow_before*100).toFixed(2):'-' }}%</span>
            <dv-charts class="bar-chart" :option="{...option,series:[{ ...option.series[0], data: [item.flow_after,item.flow_before]}]}" />
          </div>
          <div class="flow-item">
            <div class="Hz-title">冷却塔出水温度</div>
            <div class="item-content">
              <div class="label-group">
                <div>{{ towerData&&towerData[0]&&towerData[0].name?towerData[0].name:'' }}</div>
                <div>{{ towerData&&towerData[1]&&towerData[1].name?towerData[1].name:'' }}</div>
                <div>{{ towerData&&towerData[2]&&towerData[2].name?towerData[2].name:'' }}</div>
              </div>
              <vechart class="bar-chart" :options="{...mutiOption,series:[{ ...mutiOption.series[0], data: [towerData[2].temperature_after,towerData[2].temperature_before,towerData[1].temperature_after,towerData[1].temperature_before,towerData[0].temperature_after,towerData[0].temperature_before]}]}" />
            </div>

          </div>
        </div>
        <div class="setting-title"><div class="title-left">[3]</div><div class="title-right">冰机各个模块系统模块优化前后对比</div></div>
        <div class="module-frame">
          <div class="flow-item table-frame">
            <table>
              <tr>
                <td style="text-align:right;">总功率：</td>
                <td colspan="3" class="input-item"><div><input readonly="readonly" :value="completeData&&isNumber(completeData.totalkw_before)?completeData.totalkw_before.toFixed(2):'-'">kw</div><em style="display:inline-block;padding-top: 1.5rem;">-</em><div><input readonly="readonly" :value="completeData&&isNumber(completeData.totalkw_after)?completeData.totalkw_after.toFixed(2):'-'">kw</div></td>
                <td>系统能耗：下降{{ completeData&&isNumber(completeData.totalkw_before)&&isNumber(completeData.totalkw_after)&&completeData.totalkw_before!==0?((completeData.totalkw_before-completeData.totalkw_after)/completeData.totalkw_before*100).toFixed(2):'-' }}%</td>
              </tr>
              <tr>
                <td style="text-align:right;">COP：</td>
                <td colspan="3" class="input-item"><div><input readonly="readonly" :value="completeData&&isNumber(completeData.cop_before)?completeData.cop_before.toFixed(2):'-'"></div><em style="display:inline-block;padding-top: 1.5rem;">-</em><div><input readonly="readonly" :value="completeData&&isNumber(completeData.cop_after)?completeData.cop_after.toFixed(2):'-'"></div></td>
                <td>COP优化：{{ completeData&&isNumber(completeData.cop_before)&&isNumber(completeData.cop_after)&&completeData.cop_before!==0?((completeData.cop_after-completeData.cop_before)/completeData.cop_before*100).toFixed(2):'-' }}%</td>
              </tr>
            </table>
          </div>
          <div class="flow-item">
            <div class="Hz-title">{{ host&&host.name?host.name:'' }}能耗</div>
            <span>节能{{ host&&isNumber(host.kw_before)&&isNumber(host.kw_after)?(host.kw_before-host.kw_after).toFixed(2):'-' }}kw</span>
            <dv-charts class="bar-chart" :option="{...option,series:[{ ...option.series[0], data: [host.kw_after,host.kw_before]}]}" />
          </div>
          <div class="flow-item">
            <div class="Hz-title">{{ dataList&&dataList[0]&&dataList[0].name?dataList[0].name:'' }}能耗</div>
            <span>节能{{ dataList&&dataList[0]&&isNumber(dataList[0].kw_before)&&isNumber(dataList[0].kw_after)?(dataList[0].kw_before-dataList[0].kw_after).toFixed(2):'-' }}kw</span>
            <dv-charts class="bar-chart" :option="{...option,series:[{ ...option.series[0], data: [dataList[0].kw_after,dataList[0].kw_before]}]}" />
          </div>

          <div class="flow-item">
            <vechart :options="WaterfallOption" />
          </div>
          <div v-for="(item,index) in lastTwoKwData" :key="index" class="flow-item">
            <div class="Hz-title">{{ item&&item.name?item.name:'' }}能耗</div>
            <span>节能{{ item&&isNumber(item.kw_before)&&isNumber(item.kw_after)?(item.kw_before-item.kw_after).toFixed(2):'-' }}kw</span>
            <dv-charts class="bar-chart" :option="{...option,series:[{ ...option.series[0], data: [item.kw_after,item.kw_before]}]}" />
          </div>
          <div class="flow-item">
            <div class="Hz-title">冷却塔能耗</div>
            <span>节能{{ (towerBeforeTotal-towerAfterTotal).toFixed(2) }}kw</span>
            <dv-charts class="bar-chart" :option="{...option,series:[{ ...option.series[0], data: [towerAfterTotal,towerBeforeTotal]}]}" />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import option from './json/HorizontalBarChart.json'
import options from './json/WaterfallBarChart.json'
import mutiOption from './json/mutiBarChart.json'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    HzCompare: () => import('@/components/HzCompare.vue'),
    vechart: () => import('@components/charts/Vechart.vue')
  },
  data() {
    return {
      mainTitle: '智慧节能-中温冰机系统节能总览',
      mutiOption: mutiOption,
      option: option,
      options: options
    }
  },
  computed: {
    svgLeftValue0() {
      if (this.towerData && this.towerData[0] && this.isNumber(this.towerData[0].frequency_before) && this.isNumber(this.towerData[0].frequency_after)) {
        return (this.towerData[0].frequency_after < this.towerData[0].frequency_before ? this.towerData[0].frequency_after / 70 * 100 : this.towerData[0].frequency_before / 70 * 100) + '%'
      } else {
        return '0'
      }
    },
    svgWidthValue0() {
      return this.towerData && this.towerData[0] && this.isNumber(this.towerData[0].frequency_before) && this.isNumber(this.towerData[0].frequency_after) ? Math.abs(this.towerData[0].frequency_before - this.towerData[0].frequency_after) / 70 * 100 + '%' : '0'
    },
    svgLeftValue1() {
      if (this.towerData && this.towerData[1] && this.isNumber(this.towerData[1].frequency_before) && this.isNumber(this.towerData[1].frequency_after)) {
        return (this.towerData[1].frequency_after < this.towerData[1].frequency_before ? this.towerData[1].frequency_after / 70 * 100 : this.towerData[1].frequency_before / 70 * 100) + '%'
      } else {
        return '0'
      }
    },
    svgWidthValue1() {
      return this.towerData && this.towerData[1] && this.isNumber(this.towerData[1].frequency_before) && this.isNumber(this.towerData[1].frequency_after) ? Math.abs(this.towerData[1].frequency_before - this.towerData[1].frequency_after) / 70 * 100 + '%' : '0'
    },
    svgLeftValue2() {
      if (this.towerData && this.towerData[1] && this.isNumber(this.towerData[2].frequency_before) && this.isNumber(this.towerData[2].frequency_after)) {
        return (this.towerData[2].frequency_after < this.towerData[2].frequency_before ? this.towerData[2].frequency_after / 70 * 100 : this.towerData[2].frequency_before / 70 * 100) + '%'
      } else {
        return '0'
      }
    },
    svgWidthValue2() {
      return this.towerData && this.towerData[2] && this.isNumber(this.towerData[2].frequency_before) && this.isNumber(this.towerData[2].frequency_after) ? Math.abs(this.towerData[2].frequency_before - this.towerData[2].frequency_after) / 70 * 100 + '%' : '0'
    },
    towerBeforeTotal() {
      let towerBeforeTotal = 0
      for (let x = 0; x < this.towerData.length; x++) {
        if (this.towerData && this.towerData[x] && this.isNumber(this.towerData[x].kw_before)) {
          towerBeforeTotal = towerBeforeTotal + this.towerData[x].kw_before
        }
      }
      return towerBeforeTotal
    },
    towerAfterTotal() {
      let towerafterTotal = 0
      for (let x = 0; x < this.towerData.length; x++) {
        if (this.towerData && this.towerData[x] && this.isNumber(this.towerData[x].kw_after)) {
          towerafterTotal = towerafterTotal + this.towerData[x].kw_after
        }
      }
      return towerafterTotal
    },
    WaterfallOption() {
      const hostSaveKw = this.host.kw_before - this.host.kw_after
      const pumpSaveKw = this.pumpData[0].kw_before + this.pumpData[1].kw_before - this.pumpData[0].kw_after - this.pumpData[1].kw_after
      const towerSaveKw = this.towerBeforeTotal - this.towerAfterTotal
      if (this.isNumber(hostSaveKw) && this.isNumber(pumpSaveKw) && this.isNumber(towerSaveKw) && this.isNumber(this.completeData.totalkw_before)) {
        return {
          ...this.options,
          series: [
            { ...this.options.series[0],
              data: [0, (this.completeData.totalkw_before - hostSaveKw).toFixed(2), (this.completeData.totalkw_before - hostSaveKw - pumpSaveKw).toFixed(2), (this.completeData.totalkw_before - hostSaveKw - pumpSaveKw - towerSaveKw).toFixed(2), 0]
            },
            { ...this.options.series[1],
              data: [
                this.completeData.totalkw_before.toFixed(2),
                {
                  value: hostSaveKw.toFixed(2),
                  itemStyle: {
                    barBorderColor: 'rgb(255,246,1)',
                    color: 'rgb(255,246,1)'
                  }
                }, {
                  value: pumpSaveKw.toFixed(2),
                  itemStyle: {
                    barBorderColor: 'rgb(255,246,1)',
                    color: 'rgb(255,246,1)'
                  }
                }, {
                  value: towerSaveKw.toFixed(2),
                  itemStyle: {
                    barBorderColor: 'rgb(255,246,1)',
                    color: 'rgb(255,246,1)'
                  }
                }, (this.completeData.totalkw_before - hostSaveKw - pumpSaveKw - towerSaveKw).toFixed(2)] }
          ]
        }
      } else {
        return this.options
      }
    },
    completeData() {
      return this.$route.params.completeData
    },
    dataList() {
      return this.$route.params.dataList
    },
    host() {
      return this.dataList.filter(e => e.type === 'host')[0]
    },
    frequencyData() {
      return this.dataList.filter(e => e.type !== 'host')
    },
    towerData() {
      return this.frequencyData.filter(e => e.type === 'TowerGroup')
    },
    pumpData() {
      return this.dataList.slice(0, 2)
    },
    lastTwoKwData() {
      return this.pumpData.filter(e => e.name !== '冷却泵')
    }
  },
  methods: {
    openView() {
      this.$router.push({ name: 'ParameterOptimization' })
    },
    isNumber(val) {
      if (typeof (val) !== 'number') {
        return false
      } else {
        var regPos = /^\d+(\.\d+)?$/ // 非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
        if (regPos.test(val) || regNeg.test(val)) {
          return true
        } else {
          return false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mainbody{
  height: 100vh;
  background: url('~@assets/report/bg.png') no-repeat;
  background-size: 100% 100%;
}
.container{
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.final-value{
  position: absolute;
  top: 2.5%;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.4rem;
  font-weight: 600;
}
.view-button{
  width: 8rem;
  height: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  top: 4%;
  right: 0.5%;
  font-size: 1rem;
  color:white;
  align-self: flex-end;
  background-color: #05417f !important;
  border: 0;
  border-radius: 0;
  padding: 0 10px;
  }
.system-frame{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 82%;
  overflow-y:scroll;
  margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
}
.setting-title{
  height: 2.5rem;
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  margin-top: 1rem;
}
.title-left{
  font-weight: bold;
  background-color: aqua;
  color: black;
  padding:0 0.5rem;
  font-size: 1.3rem;
  line-height: 2.5rem;
}
.title-right{
  padding: 0 1rem;
  font-size: 1.3rem;
  line-height: 2.5rem;
  font-weight: 600;
  width: 100%;
  background-color: rgba(1, 121, 197, 0.3);
}
.bar-chart{
  height: 11vh;
  min-height: 6rem;
}
.flow-frame{
  // flex-basis: 20%;
  display: flex;
  flex-flow: row nowrap;
  margin-top: 1rem;
  justify-content: space-between;
}
.flow-item{
  position: relative;
  background: rgba(1, 121, 197, 0.3);
  padding: 1rem;
  flex-basis: 32.5%;
  margin: 0.5rem 0;
}
.table-frame{
  display: flex;
  justify-content: center;
  align-items: center;
}
.legend{
  width: 63%;
  position: absolute;
  top: 2%;
  right: 1%;
  display: flex;
  flex-flow: row wrap;
}
.legend-item{
  flex-basis: 50%;
  white-space: nowrap;
  line-height: 1.5rem;
  height: 1.5rem;
  font-size: 0.9rem;
}
.legend-item span{
  display: inline-block;
  width: 10%;
  height: 20%;
  line-height: 1.5rem;
  margin-right: 0.5rem;
  vertical-align: super;
}
.flow-item>span{
  position: absolute;
  bottom: 32%;
  right: 3%;
  font-weight: 600;
  color: rgb(255,246,1);
  z-index: 9;
}
.item-content{
  display: flex;
  height: 11vh;
  min-height: 6rem;
}
.label-group{
  display: flex;
  flex-flow: column;
  margin-right: 0.5rem;
}
.label-group>div{
  white-space: nowrap;
  flex-basis: 25%;
  font-weight: 600;
}
.module-frame{
  // flex-basis: 45%;
  display: flex;
  flex-flow: row wrap;
  margin-top: 1rem;
  justify-content: space-between;
}
.module-frame table{
  font-size: 1.1rem;
  font-weight: 600;
}
.module-frame .input-item{
  display: flex;
  flex-flow: row nowrap;
  vertical-align: bottom;
}
.module-frame .input-item div{
  margin: 1rem 0.5rem;
}
.module-frame input{
  width: 6rem;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
}
.module-frame td>div{
  width: 9rem;
  padding: 5px;
  border: 1px solid #095faf;
  background: #0a3361;
}
//去掉type=number时，右边的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance:textfield;
}
</style>
